<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="utf-8">
  <title>栏目管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"  media="all">
   <link rel="stylesheet" th:href="@{/static/layui/iconPicker/layui.css}"  media="all">
  <script th:src="@{/static/layui/layui.js}"></script>
  <style>
  .layui-input, .layui-textarea {
    display: block;
    width: 70%;
    padding-left: 10px;
 }
 	.layui-select-title input{
 		width: 100%;
 	}
  </style>
</head>
<body>
<blockquote class="layui-elem-quote">
栏目编辑
</blockquote>
<form class="layui-form" action="" lay-filter="menuEdit">
  <input type="hidden" name="id" id="id">
  <div class="layui-form-item">
    <label class="layui-form-label">栏目名称</label>
    <div class="layui-input-block">
      <input type="text" name="menuName" lay-verify="menuName" autocomplete="off" placeholder="请输入栏目名称" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">栏目图标</label>
    <div class="layui-input-block">
      <input type="text" name="menuIcon" id="menuIcon" autocomplete="off" placeholder="请选择栏目图标" class="layui-input" style="display:none;">
    </div>
  </div>
  <div class="layui-form-item" style="width: 76%">
    <label class="layui-form-label">所属栏目</label>
    <input type="text" id="parentMenuName" lay-verify="parentMenuName" name="parentMenuName"  placeholder="" autocomplete="off" class="layui-input" disabled="disabled"> 
    <div class="layui-input-block" >
      <div id="parentMenu" lay-verify="parentMenu"></div> 
      <input type="hidden" id="parentId" name="parentId">
      <input type="hidden" id="menuLevel" name="menuLevel">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">栏目地址</label>
    <div class="layui-input-block">
      <input type="text" name="menuAddress" placeholder="栏目地址" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">权限</label>
    <div class="layui-input-block">
      <input type="text" name="permission" placeholder="权限" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">显示</label>
    <div class="layui-input-block">
      <input type="checkbox"  name="menuStatus" lay-skin="switch" lay-filter="switchStatus"  lay-text="显示|隐藏">
      <input type="hidden" id="menuStatus" value="0">
    </div>
  </div>
  
  
  <div class="layui-form-item">
    <label class="layui-form-label">新开页面</label>
    <div class="layui-input-block">
      <input type="checkbox"  name="isBlank" lay-skin="switch" lay-filter="switchStatus"  lay-text="是|否">
      <input type="hidden" id="isBlank" value="0">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">排序</label>
    <div class="layui-input-block">
      <input type="text" name="sort" placeholder="排序" autocomplete="off" class="layui-input">
    </div>
  </div>
  <shiro:hasPermission name="sysMenu:edit">
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="menuSubmit">立即提交</button>
      <button type="button" class="layui-btn layui-btn-primary" id="cancelButton">取消</button>
    </div>
  </div>
  </shiro:hasPermission>
</form>
<script th:src="@{/static/layui/layui.js}"></script>
<script th:src="@{/static/layui/iconPicker/iconPicker.js}"></script>
<script th:src="@{/static/layui/iconPicker/common.js}"></script>
<script th:inline="javascript">
window.onload = function(){
    var sysMenu=[[${sysMenu}]];
    var form_data,menuLevel,isBlank,menuStatus,parentId;
    if(sysMenu!=null){
    	 isBlank=sysMenu.isBlank;
         menuStatus=sysMenu.menuStatus;//隐藏状态
         parentId=sysMenu.parentId;//父级ID
         form_data={
        	   "id":sysMenu.id
        	  ,"parentMenuName":sysMenu.parentMenuName
      		  ,"menuName":sysMenu.menuName
      		  ,"parentId":sysMenu.parentId
      		  ,"menuLevel":sysMenu.menuLevel
     		  ,"permission":sysMenu.permission
     		  ,"menuAddress":sysMenu.menuAddress
     		  ,"sort":sysMenu.sort
     	      }
    }
	layui.use(['form', 'layedit', 'laydate','tree','util','iconPicker'], function(){
	  var form = layui.form
	  ,layer = layui.layer
	  ,layedit = layui.layedit
	  ,tree=layui.tree
	  ,util = layui.util
	  ,laydate = layui.laydate
	  ,iconPicker=layui.iconPicker;
	  var clickMenu;
	  //表单赋值
	  form.val("menuEdit",form_data);
	  var $ = layui.jquery;
	  var tree = layui.tree;
	  //创建一个编辑器
	  var editIndex = layedit.build('LAY_demo_editor');
	  //自定义验证规则
	  form.verify({
		  menuName: function(value){
	      if(value.length <= 0){
	        return '不能为空';
	      }
	    }
	    ,parentMenu: function(value){
	    	 if(clickMenu=''){
	    		 return "请选择所属栏目(单选)";
	    	 }
	    }
	  });
	  //定义点击栏目
	  var data=getMenuData();
	  //树形栏目 点击选取
	  tree.render({
		    elem: '#parentMenu'
		    ,data: getMenuData()
		    ,showCheckbox: false  //是否显示复选框
		    ,id:'checkId'  //定义索引
		    ,onlyIconControl:true//设置点击图标折叠
		    ,click:function(obj){
		    	$("#parentMenuName").val(obj.data.title);
		    	clickMenu=obj.data.id;
		    	$("#parentId").val(clickMenu);
		    	console.info(obj.data.menuLevel);
		    	$("#menuLevel").val(obj.data.menuLevel);
		    }
	   });
	  //图标
	  iconPicker.render({
          // 选择器，推荐使用input
          elem: '#menuIcon',
          // 数据类型：fontClass/unicode，推荐使用fontClass
          type: 'fontClass',
          // 是否开启搜索：true/false，默认true
          search: true,
          // 是否开启分页：true/false，默认true
          page: true,
          // 每页显示数量，默认12
          limit: 12,
          // 点击回调
          click: function (data) {
              console.log("---------");
          },
          // 渲染成功后的回调
          success: function(d) {
              console.log(d);
          }
      });
	  function getMenuData(){
		    var data = [];
		    $.ajax({
		        url: "/user/sysMenu/getMenuTree.html",    //后台数据请求地址
		        type: "post",
		        async:false,
		        data:{startLevel:1,endLevel:3},
		        dataType:"json",
		        success: function(result){
		            data = result;
		        }
		    });
		    return data;
		}
	  //监听指定开关
	  form.on('switch(switchStatus)', function(data){
	  	if(this.checked){
	  		$("#menuStatus").val("0");
	  	}else{
	  		$("#menuStatus").val("1");
	  	}
	  });
	  //设置值
	  if(menuStatus==0){
		  $("input[type=checkbox][name='menuStatus']").prop('checked', true);
	  }else{
		  $("input[type=checkbox][name='menuStatus']").prop('checked', false);
	  }
	  if(isBlank==0){
		  $("input[type=checkbox][name='isBlank']").prop('checked', false);
	  }else if(isBlank==1){
		  $("input[type=checkbox][name='isBlank']").prop('checked', true);
	  }
	  form.render('checkbox');
	  
	  function closeIframe(){
		  var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
		  parent.layer.close(index)
	  }
	  //监听取消
	  $("#cancelButton").click(function(){
		  closeIframe();
	  })
	  //监听提交
	  form.on('submit(menuSubmit)', function(data){
		  var menuLevel=$("#menuLevel").val();
		  if(menuLevel!=''){
		 	 data.field.menuLevel=parseInt(menuLevel)+1;//一级栏目
		     data.field.parentId=$("#parentId").val();
		  }
		  data.field.menuStatus=$("#menuStatus").val();//开关值
		  $.ajax({
			  url:"/user/sysMenu/add.html",
			  async:false,
			  type:"POST",
		  	  data:data.field,
		  	  success:function(result){
		  		  if(result.code==200){
		  			  parent.layer.msg(result.message,{icon: 1,time:1000},function(){
	  					closeIframe();
	  			 	  });
		  		  }else{
		  			  parent.layer.msg(result.message, {icon: result.icon});
		  		  }
		  	   }
		    })
	  });
	});
}	
</script>
</body>
</html>